<template>
  <FITable
    id="history"
    :columns="columnsHistory"
    :data="state.historyList"
    :pageConfig="pageConfig"
    :isTableLoading="isTableLoading"
    :show-save-model="false"
    :showPageBar="false"
    checkMode=""
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
  >
    <template #rowNo="{ scope }">
      <div>{{ scope.$index + 1 }}</div>
    </template>
  </FITable>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref, watch } from 'vue'
import FITable from '@/components/FITable/index.vue'
import { apiRequestPost } from '@/api/globalApi.js'
import type { PageConfig, Column } from '@/types/components'
import { useRoute } from 'vue-router'
const props = defineProps({
  processInstanceId: {
    type: String,
    default: '',
  },
  isRefresh: {
    type: Boolean,
    default: false,
  },
})
// 路由对象
const route = useRoute()

// 表格是否显示加载中
const isTableLoading = ref(false)
const state = reactive({
  // 查询条件
  query: {
    processInstanceId: props.processInstanceId,
    current: 1,
    size: 10,
  },
  // 表格数据
  historyList: [],
})
// 页面配置
const pageConfig: PageConfig = reactive({
  total: 0, // 总条数
  currentPage: 1, // 当前页码
})

// 表格列数据
const columnsHistory: Column[] = reactive([
  {
    label: '序号',
    prop: 'rowNo',
    align: 'center',
    width: '90',
    sortable: true,
  },
  {
    label: '节点名称',
    prop: 'taskName',
    align: 'center',
    width: '200',
    sortable: true,
  },
  {
    label: '部门',
    prop: 'completeDeptCname',
    align: 'center',
    width: '120',
    sortable: true,
  },
  {
    label: '人员',
    prop: 'completerFullname',
    align: 'center',
    width: '150',
    sortable: true,
  },
  {
    label: '开始时间',
    prop: 'startTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
    sortable: true,
  },
  {
    label: '完成时间',
    prop: 'endTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
    sortable: true,
  },
  {
    label: '审批结果',
    prop: 'approvalResult',
    align: 'center',
    width: '150',
    sortable: true,
  },
  {
    label: '审批意见',
    prop: 'opinion',
    align: 'center',
    minWidth: '300',
    sortable: true,
  },
])

// 分页大小改变回调函数
const handleSizeChange = (e) => {
  pageConfig.pageSize = e
  pageConfig.currentPage = 1
  searchFn()
}

// 分页页码改变回调函数
const handleCurrentChange = (e) => {
  pageConfig.currentPage = e
  searchFn()
}

// 搜索查询函数
const searchFn = () => {
  // 页面搜索数据组装
  state.query.current = pageConfig.currentPage
  isTableLoading.value = true
  if (pageConfig.pageSize) state.query.size = pageConfig.pageSize
  // const apiUrl = proxy.$Button_api('/bpm-service/procInstInfo/queryProVariable', route.name)
  apiRequestPost('/bpm-service/BpmApi/getOpinionsByProcessInstanceId', state.query)
    .then((res) => {
      isTableLoading.value = false
      if (res.data.success) {
        state.historyList = res.data.data
        pageConfig.pageSize = Number(res.data.data.size)
        pageConfig.total = Number(res.data.data.count)
      }
    })
    .catch((error: any) => {
      isTableLoading.value = false
      // 处理错误
    })
}
watch(
  () => props.isRefresh,
  () => {
    searchFn()
  },
  { deep: true }
)
onMounted(() => {
  searchFn()
})
</script>
<style lang="less" scoped></style>
